/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// 歌曲的基本信息--》歌曲名称和歌曲人

import React, {useState} from 'react';
import {StyleSheet, View, Pressable, Text, Image} from 'react-native';

interface MusicPlayProps {
  isHoverdate: boolean;
  title: string;
  artist: string;
}

let isHover;
const MusicBaseInfo: React.FC<MusicPlayProps> = ({
  isHoverdate,
  title,
  artist,
}) => {
  isHover = isHoverdate;
  // 鼠标是否悬浮
  const [isHovered, setIsHovered] = useState(false);
  return (
    <View style={styles.musicOut}>
      <View style={styles.musicInner}>
        <View>
          <Pressable
            onHoverIn={() => {
              setIsHovered(true);
            }}
            onHoverOut={() => {
              setIsHovered(false);
            }}>
            <Text style={[styles.text, isHovered && styles.mouseHovered]}>
              {title}
            </Text>
          </Pressable>
          <Text style={styles.title}>{artist}</Text>
        </View>
        <Image
          source={require('../../../../asset/likes.svg')}
          style={styles.imageGrey}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    color: 'rgba(255, 255, 255, 0.9)',
    fontSize: 24,
    fontWeight: '700',
  },
  mouseHovered: {
    fontSize: 14,
  },
  title: {
    fontSize: 14,
    color: 'rgba(255, 255, 255, 0.6)',
    marginTop: 3,
  },
  imageGrey: {
    width: 30,
    height: 30,
    opacity: 0.4,
  },
  musicOut: {
    width: isHover ? '93%' : '88%',
    marginHorizontal: 20,
    alignItems: isHover ? 'flex-start' : 'center',
    marginTop: isHover ? 0 : 24,
  },
  musicInner: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: isHover ? '36%' : '100%',
  },
});

export default MusicBaseInfo;
